@layout("../../system/layout.html", {title: "timer组件"}){

<div class="panel panel-default" style="padding-bottom: 10px;margin-top:10px;">
    <div class="panel-heading">timer示例</div>
    <div>
        <h3>&nbsp;&nbsp;&nbsp;基础示例</h3>
        <script src="${ctxPath}/static/plugins/laydate/laydate.js"></script>
        <script>
            lay('#version').html('-v'+ laydate.v);
            //执行一个laydate实例
            //常规用法
            laydate.render({
                elem: '#test1' //指定元素
            });
            //国际版
            laydate.render({
                elem: '#test1-1'
                ,lang: 'en'
            });
            //年选择器
            laydate.render({
                elem: '#test2'
                ,type: 'year'
            });
            //年月选择器
            laydate.render({
                elem: '#test3'
                ,type: 'month'
            });
            //时间选择器
            laydate.render({
                elem: '#test4'
                ,type: 'time'
            });
            //时间选择器
            laydate.render({
                elem: '#test5'
                ,type: 'datetime'
            });
            //日期范围
            laydate.render({
                elem: '#test6'
                ,range: true
            });
            //年范围
            laydate.render({
                elem: '#test7'
                ,type: 'year'
                ,range: true
            });
            //年月范围
            laydate.render({
                elem: '#test8'
                ,type: 'month'
                ,range: true
            });
            //时间范围
            laydate.render({
                elem: '#test9'
                ,type: 'time'
                ,range: true
            });
            //日期时间范围
            laydate.render({
                elem: '#test10'
                ,type: 'datetime'
                ,range: true
            });
            //墨绿主题
            laydate.render({
                elem: '#test29'
                ,theme: 'molv'
            });
            //自定义颜色
            laydate.render({
                elem: '#test30'
                ,theme: '#393D49'
            });
            //格子主题
            laydate.render({
                elem: '#test31'
                ,theme: 'grid'
            });
        </script>

        <input type="text" class="demo-input" placeholder="常规用法" id="test1">
        <input type="text" class="demo-input" placeholder="国际版" id="test1-1">
        <input type="text" class="demo-input" placeholder="年选择器" id="test2">
        <input type="text" class="demo-input" placeholder="年月选择器" id="test3">
        <input type="text" class="demo-input" placeholder="时间选择器" id="test4">
        <input type="text" class="demo-input" placeholder="时间选择器" id="test5">
        <div style="margin-bottom: 30px;"></div>
        <input type="text" class="demo-input" placeholder="日期范围" id="test6">
        <input type="text" class="demo-input" placeholder="年范围" id="test7">
        <input type="text" class="demo-input" placeholder="年月范围" id="test8">
        <input type="text" class="demo-input" placeholder="时间范围" id="test9">
        <input type="text" class="demo-input" placeholder="日期时间范围" id="test10">
        <div style="margin-bottom: 30px;"></div>
        <input type="text" class="demo-input" placeholder="墨绿主题" id="test29">
        <input type="text" class="demo-input" placeholder="自定义颜色" id="test30">
        <input type="text" class="demo-input" placeholder="格子主题" id="test31">
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#dpLTE',
        data: {
            singleState: '',
            idx: '',
            state: ''
        }
    });
</script>
@}